<template>
    <!-- 左侧工具栏 -->
    <div class="image-handle">
        <!-- 功能菜单 -->
        <el-tabs v-model="activeToolName" @tab-click="handleClick">
            <el-tab-pane label="画布控制" name="canvasInput">
                <!-- 图片大小控制 -->
                <div class="handle-canvas-div">
                    <div style="display: inline-block;width: 45%;">高度：<el-input v-model="canvasHeight" placeholder="输入要制作的图片高度" style="width: 70%"/></div>
                    <div style="display: inline-block;width: 45%;">宽度：<el-input v-model="canvasWidth" placeholder="输入要制作的图片宽度" style="width: 70%"/></div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="上传图片" name="uploadImage">
                <!-- 图片上传 -->
                <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="fileListChange"
                           :file-list="imageUrlList">
                    <template #default>
                        <el-icon>
                            <plus/>
                        </el-icon>
                    </template>
                </el-upload>
            </el-tab-pane>
            <el-tab-pane label="图片裁剪" name="second">
                <div v-if="imageUrlList.length>0">

                </div>
            </el-tab-pane>
            <el-tab-pane label="Role" name="third">Role</el-tab-pane>
            <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
        </el-tabs>
        <!-- 右侧显示的canvas -->
        <div class="image-show">
            <canvas id="myCanvas" :width="canvasWidth" :height="canvasHeight"></canvas>
        </div>
    </div>
</template>

<script>
    import {Plus, ZoomIn, Download, Delete} from '@element-plus/icons-vue'

    export default {
        name: "index",
        components: {Plus, ZoomIn, Download, Delete,},
        data() {
            return {
                canvasWidth: 500,
                canvasHeight: 500,
                imageUrlList: [],
                currentImage: '',
                activeToolName: '',
            }
        },
        mounted() {
            //this.init()
        },
        methods: {
            init() {
                let myCanvas = document.getElementById("myCanvas");
                const ctx = myCanvas.getContext("2d");
                ctx.fillStyle = "#FF0000";
                ctx.fillRect(0, 0, 150, 75)
            },
            handleClick() {

            },
            fileListChange(file, fileList) {
                this.imageUrlList = fileList
                this.drawImage(fileList[fileList.length - 1])
            },
            drawImage(file) {
                debugger
                let myCanvas = document.getElementById("myCanvas");
                const ctx = myCanvas.getContext("2d");

                const image = new Image();
                image.src = file.url;
                image.onload = function () {
                    const w = image.width;
                    const h = image.height;
                    ctx.drawImage(image, 0, 0, w, h);
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    .image-handle {
        height: 100%;
        width: 100%;

        .image-show {
            float: left;
        }
    }
</style>
